<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
        <a-tab-pane key="collectionRecordBar" tab="收款统计">
          <a-row>
            <a-col :span="10">
              <a-radio-group v-model:value="collectionRecordBarType" @change="statisticst">
                <a-radio-button value="collectionRecordYear">按年统计</a-radio-button>
                <a-radio-button value="collectionRecordMonth">按月统计</a-radio-button>
                <a-radio-button value="collectionRecordWeek">按周统计</a-radio-button>
<!--                <a-radio-button value="category">按类别统计</a-radio-button>-->
<!--                <a-radio-button value="cabinet">按柜号统计</a-radio-button>-->
              </a-radio-group>
            </a-col>
          </a-row>
          <BarMulti :chartData="dataSource" :option="collectionRecordMultiBarOption" height="50vh"></BarMulti>
<!--          <Bar :chartData="dataSource" height="50vh"></Bar>-->
        </a-tab-pane>
        <a-tab-pane key="bar" tab="合同统计">
          <a-row>
            <a-col :span="10">
              <a-radio-group v-model:value="barType" @change="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="week">按周统计</a-radio-button>
                <!--                <a-radio-button value="category">按类别统计</a-radio-button>-->
                <!--                <a-radio-button value="cabinet">按柜号统计</a-radio-button>-->
              </a-radio-group>
            </a-col>
          </a-row>
          <BarMulti :chartData="dataSource" :option="multiBarOption" height="50vh"></BarMulti>
          <!--          <Bar :chartData="dataSource" height="50vh"></Bar>-->
        </a-tab-pane>
<!--        <a-tab-pane key="pie" tab="销售合同饼状图" force-render>
          <a-row :gutter="24">
            <a-col :span="10">
              <a-radio-group v-model:value="pieType" @change="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="week">按周统计</a-radio-button>
&lt;!&ndash;                <a-radio-button value="category">按类别统计</a-radio-button>
                <a-radio-button value="cabinet">按柜号统计</a-radio-button>&ndash;&gt;
              </a-radio-group>
            </a-col>
            <Pie :chartData="dataSource" height="40vh"></Pie>
          </a-row>
        </a-tab-pane>-->
      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { defHttp } from '/@/utils/http/axios';
import { ref, unref, reactive } from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import Pie from '/@/components/chart/Pie.vue';
import BarMulti from "@/components/chart/BarMulti.vue";

const activeKey = ref('collectionRecordBar');
const barType = ref('year');
const collectionRecordBarType = ref('collectionRecordYear');
const pieType = ref('year');
const dataSource = ref([]);
const url = reactive({
  getYearCountInfo: '/xcbd/xcbdSalesContract/report/getYearCountInfo',
  getCollectionRecordYearCountInfo: '/xcbd/xcbdSalesContract/collectionRecord/getYearCountInfo',
  getMonthCountInfo: '/xcbd/xcbdSalesContract/report/getMonthCountInfo',
  getCollectionRecordMonthCountInfo: '/xcbd/xcbdSalesContract/collectionRecord/getMonthCountInfo',
  getWeekCountInfo: '/xcbd/xcbdSalesContract/report/getWeekCountInfo',
  getCollectionRecordWeekCountInfo: '/xcbd/xcbdSalesContract/collectionRecord/getWeekCountInfo',
  getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
  getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
});
const collectionRecordMultiBarOption = {
  title: { text: '收款统计按收款方式', left: 'center' },
};
const multiBarOption = {
  title: { text: '合同统计', left: 'center' },
};
async function loadDate(url, type, params) {
  const res = await defHttp.get({ url, params }, { isTransformResponse: false, errorMessageMode: 'none' });
  if (res.success) {
    dataSource.value = [];
    switch (type) {
      case 'year':
        getYearCountSource(res.result);
        break;
      case 'collectionRecordYear':
        getYearCountSource(res.result);
        break;
      case 'month':
        getMonthCountSource(res.result);
        break;
      case 'collectionRecordMonth':
        getMonthCountSource(res.result);
        break;
      case 'week':
        getWeekCountSource(res.result);
        break;
      case 'collectionRecordWeek':
        getWeekCountSource(res.result);
        break;
      case 'category':
        getCategoryCountSource(res.result);
        break;
      case 'cabinet':
        getCabinetCountSource(res.result);
        break;
      default:
        break;
    }
  }
}
function getYearCountSource(data) {
  for (let i = 0; i < data.length; i++) {
    dataSource.value.push({
      name: `${data[i].year}年`,
      value: data[i].yearcount,
      type: data[i].type,
    });
  }
}
function getMonthCountSource(data) {
  for (let i = 0; i < data.length; i++) {
    dataSource.value.push({
      name: `${data[i].month}`,
      value: data[i].monthcount,
      type: data[i].type,
    });
  }
}
function getWeekCountSource(data) {
  for (let i = 0; i < data.length; i++) {
    dataSource.value.push({
      name: `${data[i].week}`,
      value: data[i].weekcount,
      type: data[i].type,
    });
  }
}
function getCategoryCountSource(data) {
  for (let i = 0; i < data.length; i++) {
    dataSource.value.push({
      name: `${data[i].classifyname}`,
      value: data[i].cntrnocount,
    });
  }
}
function getCabinetCountSource(data) {
  for (let i = 0; i < data.length; i++) {
    dataSource.value.push({
      name: `${data[i].cabinetname}`,
      value: data[i].cabinetcocunt,
    });
  }
}
// 选择统计类别
function statisticst(e) {
  console.log("-----------------------------",unref(activeKey));
  if (unref(activeKey) === 'pie') {
    loadDate(getUrl(unref(pieType)), unref(pieType), {});
  } else if (unref(activeKey) === 'collectionRecordBar') {
    console.log(unref(activeKey));
    loadDate(getUrl(unref(collectionRecordBarType)), unref(collectionRecordBarType), {});
  } else {
    loadDate(getUrl(unref(barType)), unref(barType), {});
  }

}

function getUrl(type) {
  console.log("type===",type);
  if (type === 'year') {
    return url.getYearCountInfo;
  }
  if (type === 'collectionRecordYear') {
    return url.getCollectionRecordYearCountInfo;
  }
  if (type === 'month') {
    return url.getMonthCountInfo;
  }
  if (type === 'collectionRecordMonth') {
    return url.getCollectionRecordMonthCountInfo;
  }
  if (type === 'collectionRecordWeek') {
    return url.getCollectionRecordWeekCountInfo;
  }
  if (type === 'week') {
    return url.getWeekCountInfo;
  }
  if (type === 'category') {
    return url.getCntrNoCountInfo;
  }
  if (type === 'cabinet') {
    return url.getCabinetCountInfo;
  }
}
//tab切换
function tabChange(key) {
  console.log('切换的key:', key);
  if(key=='bar'){
    loadDate(url.getYearCountInfo, 'year', {});
  }else {
    loadDate(url.getCollectionRecordYearCountInfo, 'collectionRecordYear', {});
  }
}
loadDate(url.getCollectionRecordYearCountInfo, 'collectionRecordYear', {});
</script>
